#include('header.html', {title: '后台管理·视频分类', video: 'active'})

<style>
  .layui-btn + .layui-btn {
    margin-left: 2px;
  }
</style>
<!--年级添加修改模板-->
<script type="text/html" id="gradeTpl">
  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form">
        <input type="hidden" name="id" value="{{d.id}}">
        <div class="layui-form-item">
          <input class="layui-input" name="name" value="{{d.name}}"
                 lay-verType="tips" lay-verify="required" placeholder="年级名：初一">
        </div>
        {{# if(d.type === 'add') { }}
        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="gradeAdd">添加</button>
        {{# } else { }}
        <button class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-warm" lay-submit lay-filter="gradeEdit">修改
        </button>
        {{# } }}
      </form>
    </div>
  </div>
</script>
<!--学科添加修改模板-->
<script type="text/html" id="subjectTpl">
  <div class="layui-card">
    <form class="layui-form">
      <input type="hidden" name="id" value="{{d.id}}">
      <div class="layui-card-body">
        <div class="layui-form-item">
          <select name="specialtyId" class="layui-select" lay-verType="tips" lay-verify="reqSelect">
            {{# for(var i in d.grades) { }}
            <option value="{{d.grades[i].id}}" {{d.gid== d.grades[i].id?
            'selected':''}}>{{d.grades[i].name}}</option>
            {{# } }}
          </select>
        </div>
        <div class="layui-form-item">
          <input class="layui-input" name="name" value="{{d.name}}"
                 lay-verType="tips" lay-verify="required" placeholder="学科名：物理">
        </div>
        {{# if(d.type === 'add') { }}
        <button class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-normal" lay-submit lay-filter="subjectAdd">添加
        </button>
        {{# } else { }}
        <button class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-warm" lay-submit lay-filter="subjectEdit">修改</button>
        {{# } }}
      </div>
    </form>
  </div>
</script>
<!--主体内容部分-->
<div class="body-wrapper">
  <div class="layui-card">
    <div class="layui-card-header">
      <h3 class="card-title font-yy">
        视频分类
      </h3>
      <div class="header-tools">
        <button id="addGrade" class="layui-btn layui-btn-sm layui-btn-warm">
          <i class="layui-icon layui-icon-add-circle"></i>年级
        </button>
        <button id="addSubject" class="layui-btn layui-btn-sm layui-btn-normal">
          <i class="layui-icon layui-icon-add-circle"></i>学科
        </button>
      </div>
    </div>
    <div class="layui-card-body layui-row">
      <div class="layui-col-sm6" style="padding-right: 8px;">
        <table id="grade" lay-filter="gradeTag"></table>
      </div>
      <div class="layui-col-sm6" style="padding-left: 8px;">
        <table id="subject" lay-filter="subjectTag"></table>
      </div>
      <script type="text/html" id="Tools">
        <a class="layui-btn layui-btn-xs" lay-event="Edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="Del">删除</a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['table', 'form', 'jquery', 'layer', 'laytpl'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var laytpl = layui.laytpl;
    var form = layui.form;

    var dialogIndex = 0;

    form.verify({
      reqSelect: function (val, elem) {
        if (val == null || val === '') {
          return "请先添加年级！";
        }
      }
    });

    function parseData(res) {
      return {
        "code": res.code,
        "msg": res.msg,
        "count": (res.payload ? res.payload.totalRows : 0),
        "data": (res.payload ? res.payload.rows : [])
      };
    }

    var $gradeTpl = $('#gradeTpl');
    var $subjectTpl = $('#subjectTpl');

    var methods = {
      Dialog: function (title, html) {
        dialogIndex = layer.open({
          type: 1,
          title: title,
          offset: ['200px'],
          content: html
        });
        form.render('select')
      },
      gradeAdd: function () {
        laytpl($gradeTpl.html()).render({type: 'add', name: ''}, function (html) {
          methods.Dialog('年级添加', html);
        });
      },
      gradeEdit: function (obj) {
        laytpl($gradeTpl.html()).render({type: 'edit', id: obj.id, name: obj.name}, function (html) {
          methods.Dialog('年级修改', html);
        });
      },
      gradeDel: function (obj) {
        var id = obj.id;
        var cm = '<span class="layui-badge layui-bg-red">' + obj.name + '</span>';
        layer.confirm('确定删除' + cm, {title: '删除提示', icon: 3}, function (index) {
          $.post('/course/type/specialty/delete', {specialtyId: id}, function (data) {
            if (data.success) {
              layer.msg('删除成功', {icon: 6, time: 1200});
              table.reload('grade');
            } else {
              layer.msg('删除失败，该年级下存在科目！', {icon: 5, time: 1200});
            }
          });
          layer.close(index);
        });
      },
      subjectAdd: function () {
        methods.getGrades(function (grades) {
          laytpl($subjectTpl.html()).render({type: 'add', name: '', grades: grades}, function (html) {
            methods.Dialog('学科添加', html);
          });
        });
      },
      subjectEdit: function (obj) {
        methods.getGrades(function (grades) {
          laytpl($subjectTpl.html()).render({
            type: 'edit', id: obj.id, name: obj.name,
            grades: grades, gid: obj.specialtyId
          }, function (html) {
            methods.Dialog('学科修改', html);
          });
        });
      },
      subjectDel: function (obj) {
        var id = obj.id;
        var cm = '<span class="layui-badge layui-bg-red">' + obj.name + '</span>';
        layer.confirm('确定删除科目' + cm, {title: '删除提示', icon: 3}, function (index) {
          $.post('/course/type/subject/delete', {subjectId: id}, function (data) {
            if (data.success) {
              layer.msg('删除成功', {icon: 6, time: 1200});
              table.reload('subject');
            } else {
              layer.msg('删除失败，该科目下存在视频课程！', {icon: 5, time: 1200});
            }
          });
          layer.close(index);
        });
      },
      getGrades: function (fun) {
        $.post('/course/type/specialty/page', function (data) {
          if (data.success) {
            fun ? fun(data.payload.rows) : null;
          }
        });
      }
    };

    table.render({
      elem: '#grade',
      url: '/course/type/specialty/page',
      method: 'post',
      page: true,
      cols: [[
        {type: 'numbers', title: '序号'},
        {field: 'name', title: '年级'},
        {field: 'time', title: '添加时间'},
        {title: '操作', toolbar: '#Tools', width: 115}
      ]],
      parseData: parseData
    });

    table.render({
      elem: '#subject',
      url: '/course/type/subject/page',
      method: 'post',
      page: true,
      cols: [[
        {type: 'numbers', title: '序号'},
        {field: 'name', title: '科目'},
        {title: '年级', templet: '<i><span class="layui-badge layui-bg-cyan">{{d.specialty.name}}</span></i>'},
        {field: 'time', title: '添加时间'},
        {title: '操作', toolbar: '#Tools', width: 115}
      ]],
      parseData: parseData
    });

    table.on('tool(gradeTag)', function (obj) {
      var m = methods['grade' + obj.event];
      if (m != null) {
        m.call(this, obj.data);
      }
    });
    table.on('tool(subjectTag)', function (obj) {
      var m = methods['subject' + obj.event];
      if (m != null) {
        m.call(this, obj.data);
      }
    });
    $('#addGrade').click(methods.gradeAdd);
    $('#addSubject').click(methods.subjectAdd);

    form.on('submit(gradeAdd)', function (obj) {
      $.post('/course/type/specialty/add', {name: obj.field.name}, function (data) {
        if (data.success) {
          layer.msg('学科添加成功', {icon: 6, time: 1200});
          table.reload('grade');
        } else {
          layer.msg("学科添加失败", {icon: 5, time: 1200});
        }
        layer.close(dialogIndex);
      });
      return false;
    });
    form.on('submit(gradeEdit)', function (obj) {
      $.post('/course/type/specialty/change', {
        name: obj.field.name,
        id: obj.field.id
      }, function (data) {
        if (data.success) {
          layer.msg('修改学科成功！', {icon: 6, time: 1200});
          table.reload('grade');
        } else
          layer.msg('修改学科失败！', {icon: 5, time: 1200});
      });
      layer.close(dialogIndex);
      return false;
    });
    form.on('submit(subjectAdd)', function (obj) {
      $.post('/course/type/subject/add', {name: obj.field.name, specialtyId: obj.field.specialtyId}, function (data) {
        if (data.success) {
          layer.msg("课程添加成功", {icon: 6, time: 1200});
          table.reload('subject');
        } else {
          layer.msg("暂无学科,请先添加学科!", {icon: 5, time: 1200});
        }
        layer.close(dialogIndex);
      });
      return false;
    });
    form.on('submit(subjectEdit)', function (obj) {
      $.post('/course/type/subject/change', {
        specialtyId: obj.field.specialtyId,
        name: obj.field.name,
        id: obj.field.id
      }, function (data) {
        if (data.success) {
          layer.msg('修改课程成功！', {icon: 6, time: 1200});
          table.reload('subject');
        } else {
          layer.msg('修改课程失败！', {icon: 5, time: 1200});
        }
        layer.close(dialogIndex);
      });
      return false;
    });
  });
</script>

#include('footer.html')
